<template>
  <div class="orderPane">
    <el-table :data="resData.list">
      <el-table-column type="index" label="序号"> </el-table-column>
      <el-table-column prop="id" label="订单编号"> </el-table-column>
      <el-table-column prop="orderTime" label="下单时间">
        <template v-slot="scope">
          {{ scope.row.orderTime | fmtDateTime }}
        </template></el-table-column
      >
      <el-table-column prop="total" label="总价"></el-table-column>
      <el-table-column prop="status" label="状态"></el-table-column>
      <el-table-column
        prop="customer.username"
        label="顾客昵称"
      ></el-table-column>
      <el-table-column label="员工姓名">
        <template v-slot="scope">
          <el-tag v-if="scope.row.emmploy" type="success">{{
            scope.row.emmploy.realname
          }}</el-tag>
          <el-tag v-else type="info">暂未接单</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template v-slot="{ row }">
          <el-button type="text">详情</el-button>
          <span
            style="padding: 0 10px"
            v-if="
              row.status == '待支付' ||
              row.status == '待派单' ||
              row.status == '待接单'
            "
          >
            <el-button type="text" v-if="row.status == '待派单'"
              >派单</el-button
            >
            <el-button v-else-if="row.status == '待接单'" type="text"
              >取消派单</el-button
            >
          </span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页插件 -->
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="resData.page"
      :page-sizes="[7, 10, 15, 20]"
      :page-size="resData.pageSize"
      layout="total, sizes, prev, pager, next"
      :total="resData.total"
    >
    </el-pagination>
  </div>
</template>
<script>
import request from "@/utils/request";
export default {
  props: {
    status: {
      type: String,
      default: null,
    },
  },
  data() {
    return {
      resData: {},
      queryPrams: {
        page: 1,
        pageSize: 10,
        status: this.status,
      },
    };
  },
  watch: {
    status(newVal, oldVal) {
      this.queryPrams.status = newVal;
      this.pageQueryOrders();
    },
  },
  components: {},
  methods: {
    // 分页查询并检索订单
    pageQueryOrders() {
      request
        .get("/order/pageQuery", {
          params: this.queryPrams,
        })
        .then((res) => {
          this.resData = res.data;
        });
    },
    // pageSize-change事件
    handleSizeChange(pageSize) {
      this.queryPrams.pageSize = pageSize;
      this.pageQueryOrders();
    },
    // current-page-change事件
    handleCurrentChange(page) {
      this.queryPrams.page = page;
      this.pageQueryOrders();
    },
  },
  created() {
    this.pageQueryOrders(); // 分页检索订单
  },
};
</script>